<template>
	<div id="app">
		<div id="nav">
			<router-link to="/qqq/111">动态路由传值</router-link> |
			<router-link to="/qqq?name=qscv&age=20">query传值</router-link> |
			<router-link to="/user">用户管理</router-link> |
			<router-link :to='{path:"/user",name:"hjh",query:{name:"20"},params:{id:30}}'>用户管理2</router-link> |
			<router-link to="/">Home</router-link> |
			<router-link to="/about">About</router-link>
			<button @click="vv">js跳转</button>
		</div>
		<router-view style="background-color: #42B983;"/>
		<router-view style="background-color: #b93e05;" name="pp"/>
	</div>
</template>
<script>
	export default {
		methods: {			
			vv() {
				//push 在history里 通过记录前进后退							
				//replace 不能通过history来前进后退
				//this.$router.replace("/qqq/1")
				//也可以向:to一样写对象
				//this.$router.push({path:"/user",name:"hjh",query:{name:"20"},params:{id:30}})
				this.$router.push({
					path: `/qqq/999`, //加了name就只能用params来传递
				})
			}
		},
		watch: {
			$route(to, from) {				
				console.log(from.path)//包不包含/user来判断
			}
		},
		created(){			
			console.log(0)//路由参数变化执行一次
		}
	}
</script>
<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
	}

	#nav {
		padding: 30px;
	}

	#nav a {
		font-weight: bold;
		color: #2c3e50;
	}

	#nav a.router-link-exact-active {
		color: #42b983;
	}
</style>
